<template>
	<view>
		<view class="status_bar"></view>
		<view class="tab-bar">
			<u-icon name="close" @click="returns" size="40"></u-icon>
			<text>手机号登录</text>
		</view>

		<view class="message">
			<text style="font-size: 30rpx;">登录体验更多精彩</text>
			<text style="font-size: 15rpx;color: #9C9C9C;">未注册手机登录后将自动创建账号</text>
		</view>

		<view class="login">
			<u-form-item type="number" label="手机">
				<u-input focus v-model:value='phone' />
			</u-form-item>
			<u-form-item label="密码">
				<u-input type="password" v-model:value="password" />
			</u-form-item>
		</view>
		<view class="ent">
			<u-button class="btn" @tap="submits" :disabled="disabled" :ripple="true" ripple-bg-color="red">下一步
			</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		login,
		getUse
	} from '../../network/user.js'
	export default {
		data() {
			// 自定义验证规则
			var phone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error("请输入正确的手机号"));
					}
				}
			};
			var password = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("密码不能为空"));
				} else {
					const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error("密码只能为数字和字母"));
					}
				}
			};
			return {
				phone: "",
				password: '',
				disabled: false, //按钮禁用
				userID: {
					id: "",
				}, //用户id，
			}
		},
		methods: {
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title,
					type,
					url
				})
			},
			submits() {
				login(this.phone, this.password).then(res => {
					uni.setStorageSync("userData", res.profile);
					this.$store.commit('changeLogin','1');   
					if (res.msg == '密码错误') {
						if (this.password === '') {
							this.showToast('请输入密码', 'none')
						} else {
							this.showToast('密码错误', 'none')
						}
					} else if (res.code == '509') {
						this.showToast('请稍后重试')
					} else if (res.code == 200) {
						uni.setStorageSync('token',res.token)
						this.showToast('登录成功', 'success')
						uni.switchTab({
							url: '/pages/discover/discover'
						})
					} else if (res.code == 400) {
						if (this.phone === ' ') {
							this.showToast('请输入账号')
						} else {
							this.showToast('账号错误', 'error')
						}
					}
					// console.log(res);
					// console.log(res.token);
				})
				
			},
			returns() {
				uni.navigateBack({
					data: 1
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		padding: 0 30rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.tab-bar {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;

		text {
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	}

	.message {
		display: flex;
		flex-direction: column;
		padding: 30px 30rpx;
	}

	// 按钮/
	.ent {
		width: 90%;
		margin: auto;
		margin-top: 50px;

		.btn {
			border-radius: 20px;
			background-color: #FE3A3B;
			color: white;
		}
	}
</style>
